<template>
  <div>
    <div class="local-name">
      产品列表
      <div class="button">
        <el-button
          size="small"
          class="right-button"
          type="success"
          v-if="userGuardList.includes(guard.ProductManage)"
          @click="showAdd"
        >
          <svg-icon icon-class="add"></svg-icon> 新建
        </el-button>
        <el-button
          size="small"
          class="right-button"
          type="success"
          v-if="userGuardList.includes(guard.ProductManage)"
          @click="showUpload"
        >
          <svg-icon icon-class="add"></svg-icon> 批量导入
        </el-button>
        <el-button
          size="small"
          class="right-button"
          type="success"
          v-if="userGuardList.includes(guard.ProductManage)"
          icon="el-icon-edit"
          @click="showBatchEdit"
        >批量修改
        </el-button>
        <el-button
          size="small"
          type="success"
          class="right-button"
          icon="el-icon-delete"
          v-if="userGuardList.includes(guard.ProductManage)"
          style="background:#F75A39; border-color:#F75A39;"
          @click="deleteSelect"
        >删除所选</el-button>
        <el-button
          v-show="false"
          size="small"
          :loading=rmlockLoading
          class="right-button"
          type="success"
          v-if="userGuardList.includes(guard.ProductManage)"
          @click="removeLock"
          style="background:#00B35B; border-color: #00B35B;"
        >
          <svg-icon icon-class="remove-lock"></svg-icon> 解除禁止升级
        </el-button>

      </div>
    </div>
    <div class="search-form-container">
      <el-form
        :inline="true"
        :model="searchForm"
        label-width="100px"
        @keydown.enter.native="search"
      >
        <el-input
          size="small"
          clearable
          class="input"
          v-model="searchForm.serialNumber"
          placeholder="设备出厂ID号"
        ></el-input>
        <el-input
          size="small"
          clearable
          class="input"
          v-model="searchForm.productNo"
          placeholder="产品编号"
        ></el-input>
        <el-select
          size="small"
          v-model="searchForm.typeUuid"
          filterable
          remote
          ref="productTypeSelect"
          @keydown.enter.native="hideProductTypeSelect"
          reserve-keyword
          placeholder="产品类型"
          :remote-method="remoteDeviceTypeSearch"
          :loading="remoteLoading"
          @change="productTypeChange"
          clearable
        >
          <el-option
            v-for="deviceType in deviceTypeList"
            :key="deviceType.uuid"
            :label="deviceType.name"
            :value="deviceType.uuid"
          ></el-option>
        </el-select>
        <el-select
          size="small"
          v-model="searchForm.settingId"
          filterable
          remote
          ref="productSettingSelect"
          @keydown.enter.native="hideProductSettingSelect"
          clearable
          reserve-keyword
          placeholder="配置参数"
          :remote-method="remoteSettingSearch"
          :loading="remoteLoading"
        >
          <el-option
            v-for="setting in settingList"
            :key="setting.id"
            :label="setting.name"
            :value="setting.id"
          >
          </el-option>
        </el-select>
        <el-select
          size="small"
          v-model="searchForm.packageId"
          filterable
          remote
          ref="productPackageSelect"
          @keydown.enter.native="hideProductPackageSelect"
          clearable
          reserve-keyword
          placeholder="升级包"
          :remote-method="remotePackageSearch"
          :loading="remoteLoading"
        >
          <el-option
            v-for="packagee in packageList"
            :key="packagee.id"
            :label="packagee.name"
            :value="packagee.id"
          >
          </el-option>
        </el-select>
        <el-input
          size="small"
          clearable
          class="input"
          v-model="searchForm.imsi"
          placeholder="IMSI"
        ></el-input>
        <!-- <el-input
          size="small"
          clearable
          class="input"
          v-model="searchForm.location"
          placeholder="位置"
        ></el-input> -->
        <el-select
          size="small"
          clearable
          ref="upgradeStatusSelect"
          @keydown.enter.native="hideUpgradeStatusSelect"
          v-model="searchForm.upgradeStatus"
        >
          <el-option
            v-for="item in upgradeOptionStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          clearable
          size="small"
          class="input"
          v-model="searchForm.remark"
          placeholder="备注"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          :loading="searchForm.btnLoading"
        >查询</el-button>
      </el-form>
      <upload
        ref="uploadComponent"
        @refresh="search"
      ></upload>
      <add
        ref="addComponent"
        @refresh="search"
      ></add>
      <upload
        ref="uploadComponent"
        @refresh="search"
      ></upload>
    </div>
    <batch-edit
      ref="batchEditComponent"
      @refresh="search"
    ></batch-edit>
  </div>

</template>

<script>
import Add from './add';
import Upload from './upload';
import BatchEdit from './batchEdit';
import { queryPackageListApi } from '../../../api/package';
import { generateSelectorData, upgradeSelectorData } from './service';
import { queryProductTypeListApi } from '../../../api/productType';
import { Message, MessageBox } from 'element-ui';
import { parseError } from '../../../utils';
import { queryDeviceSettingListApi } from '../../../api/deviceSetting';
import { mapState } from 'vuex';
import { batchUpdateUpgradeDeviceApi, deleteSelectedProductApi } from '../../../api/upgradeDevice';
import { getOrganizationChildrenList } from '../../../api/organization';
export default {
  components: {
    Add,
    Upload,
    BatchEdit
  },
  model: {
    prop: 'searchForm'
  },
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      settingId: null,
      packageId: null,
      rmlockLoading: false,
      remoteLoading: false,
      optionStatus: [],
      upgradeOptionStatus: [],
      deviceTypeList: [],
      packageList: [],
      settingList: [],
      organizationList: [],
      upgradeStatus: 'unknown'
    };
  },
  computed: {
    ...mapState(['upgradeDevice']),
    ...mapState(['productListCanEdit'])
  },
  created() {
    this.upgradeOptionStatus = upgradeSelectorData();
    this.optionStatus = generateSelectorData();
    this.remoteDeviceTypeSearch();
    this.remotePackageSearch();
    this.remoteSettingSearch();
    this.remoteOrganizationSearch();
    if (this.$route.query.settingId) {
      this.searchForm.settingId = parseInt(this.$route.query.settingId);
      this.settingId = parseInt(this.$route.query.settingId);
      this.search();
    }
    if (this.$route.query.packageId) {
      this.searchForm.packageId = parseInt(this.$route.query.packageId);
      this.packageId = parseInt(this.$route.query.packageId);
      this.search();
    }
  },
  methods: {
    productTypeChange() {
      this.remotePackageSearch();
      this.remoteSettingSearch();
    },
    showBatchEdit() {
      if (this.upgradeDevice.upgradeDeviceSelectedList.length == 0) return Message.warning('请先选择产品');
      if (!this.productListCanEdit.productListEditObject.value) return Message.warning('产品类型不一致');
      const typeUuid = this.productListCanEdit.productListEditObject.label;
      this.$refs.batchEditComponent.showDialog(typeUuid, this.upgradeDevice.upgradeDeviceSelectedList, this.packageId, this.settingId);
    },
    hideProductTypeSelect() {
      this.$refs.productTypeSelect.blur();
    },
    hideProductSettingSelect() {
      this.$refs.productSettingSelect.blur();
    },
    hideProductPackageSelect() {
      this.$refs.productPackageSelect.blur();
    },
    hideUpgradeStatusSelect() {
      this.$refs.upgradeStatusSelect.blur();
    },
    search() {
      this.$emit('search');
    },
    showAdd() {
      this.$refs.addComponent.showDialog();
    },
    showUpload() {
      this.$refs.uploadComponent.showDialog();
    },
    remoteDeviceTypeSearch(query) {
      this.remoteLoading = true;
      queryProductTypeListApi(query, 100)
        .then(deviceTypeList => (this.deviceTypeList = deviceTypeList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remotePackageSearch(query) {
      this.remoteLoading = true;
      queryPackageListApi(query, 100, this.searchForm.typeUuid)
        .then(packageList => {
          this.packageList = packageList;
          this.packageList.unshift({ id: 0, name: '未绑定' });
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteSettingSearch(query) {
      this.remoteLoading = true;
      queryDeviceSettingListApi(query, 100, this.searchForm.typeUuid)
        .then(settingList => {
          this.settingList = settingList;
          this.settingList.unshift({ id: 0, name: '未绑定' });
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteOrganizationSearch() {
      this.remoteLoading = true;
      getOrganizationChildrenList()
        .then(organizationList => (this.organizationList = organizationList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    removeLock() {
      if (this.upgradeDevice.upgradeDeviceSelectedList.length == 0) return Message.warning('请先选择产品');
      this.rmlockLoading = true;
      batchUpdateUpgradeDeviceApi(this.upgradeDevice.upgradeDeviceSelectedList, this.packageId, this.settingId, this.upgradeStatus)
        .then(res => Message.success(`成功解除${res.count}条产品禁止状态`))
        .catch(error => Message.error(parseError(error)))
        .finally(() => {
          this.rmlockLoading = false;
          this.search();
        });
    },
    deleteSelect() {
      if (this.upgradeDevice.upgradeDeviceSelectedList.length == 0) return Message.warning('请先选择产品');
      MessageBox.confirm(`是否确认删除选中的产品`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        deleteSelectedProductApi(this.upgradeDevice.upgradeDeviceSelectedList)
          .then(res => Message.success(`成功删除${res.count}个产品`))
          .catch(error => Message.error(parseError(error)))
          .finally(() => this.search());
      });
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  .local-name {
    padding: 10px 0 10px 10px;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    .button {
      margin-right: 10px;
    }
    .right-button {
      border: 1px solid #2c83b1;
      background-color: #2c83b1;
    }
  }
  .search-form-container {
    background-color: #fff;
    padding: 10px 10px 0 10px;
    margin: 0 10px 10px 10px;
    .el-select {
      width: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .search-input {
      width: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-input {
      width: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-input__inner {
      width: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-button--primary {
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
      margin-bottom: 10px;
    }
  }
}
</style>
